<template>
  <main class="wss-container">
    <div class="label-box-content">
      <NewCard
        :isright="true"
        :border="false"
        :style="{ 'margin-bottom': padding }"
        title="标签管理"
      >
        <template #right>
          <ComForm
            :config="config"
            @EventReset="reset"
            :list="comForm"
            @EventOnsubmit="inquireFn"
            @eventAdd="dialogVisible = true"
          ></ComForm>
        </template>
      </NewCard>
      <NewCard title="内容">
        <ComTable
          :config="config"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="CurrentPageChangeFn"
          :pagination="{
            total: pageing.total,
            pageNum: pageing.pageNum,
            pageSize: pageing.pageSize,
          }"
          :list="labelData"
          :modes="tableModes"
        >
          <el-table-column
            #default="{ row }"
            align="left"
            width="100"
            label="操作"
          >
            <template>
              <span
                style="color: #1890ff"
                v-hasPermi="['base:label:edit']"
                @click="edit(row)"
                >编辑</span
              >
            </template>
          </el-table-column>
        </ComTable>
      </NewCard>
    </div>
    <Add
      ref="tagDilog"
      @eventGettag="getlabelListFn"
      :dialogVisible.sync="dialogVisible"
    ></Add>
  </main>
</template>

<script>
import NewCard from "../../../components/newCard.vue";
import { padding } from "@/assets/styles/variables.scss";

// 标签
import { getlabelListApi } from "@/wss/newApi_3-24/base/label.js";
import ComForm from "../../../components/comForm.vue";
import ComTable from "../../../components/comTable.vue";
import Add from "@/wss/views/workbench/labelManagement/add.vue";
export default {
  components: { ComForm, ComTable, Add, NewCard },
  data() {
    return {
      // 边距
      padding: padding,
      isFilter: true,
      // 没有转换过的数据
      noLablData: [],
      // 添加对话框
      dialogVisible: false,

      // 表格配置
      config: {
        quanxian: "base:label:add",
        // border: true,
        isAdd: true,
        loading: true,
      },
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
      // 标签数据
      labelData: [],
      // 表单选项
      comForm: {
        modes: [
          {
            placeholder: "请输入标签名称",
            formType: "input",
            mode: "content",

            value: "",
          },
          {
            placeholder: "请选择标签类型",
            formType: "select",
            mode: "type",

            value: "",
            select: [],
          },
          {
            pickerType: "daterange",
            startPlaceholder: "开始日期",
            endPlaceholder: "结束日期",
            formType: "datePicker",
            placeholder: "处理日期",

            rangeSeparator: "至",
            mode: "tempDate",

            value: null,
          },
        ],
      },
      // 表格参数
      tableModes: [
        {
          showOverflowTooltip: true,

          width: 200,
          label: "标签",
          mode: "content",
          showOverflowTooltip: true,
        },
        {
          label: "标签类型",
          mode: "type",
          width: 200,
        },
        {
          label: "标签同义词",
          mode: "synonym",
          showOverflowTooltip: true,
        },

        {
          width: 200,
          label: "创建时间",
          mode: "createTime",
        },
      ],
    };
  },
  mounted() {
    this.getlabelListFn();
  },
  methods: {
    // 修改
    edit(row) {
      const _this = this;
      _this.dialogVisible = true;

      let nochangeData = this.noLablData.find((item) => item.id == row.id);

      _this.$refs.tagDilog.echo(nochangeData);
    },
    // 重设
    reset() {
      const pageing = this.pageing;
      this.pageing = {
        pageNum: pageing.pageNum,
        pageSize: pageing.pageSize,
        total: pageing.total,
      };
    },
    // 查询参数
    inquireFn(params) {
      const _this = this,
        pageing = _this.pageing;

      params.forEach((item) => {
        for (const key in item) {
          pageing[key] = item[key];
          if (item.tempDate && item.tempDate instanceof Array) {
            pageing.createStartTime = item.tempDate[0];
            pageing.createEndTime = item.tempDate[1];
            item.tempDate = null;
          }
        }
      });
      console.log(pageing);
      // 重新设置参数
      pageing.pageNum = 1;
      _this.pageing = pageing;
      this.getlabelListFn();
    },
    // 大小更变
    handleSizeChange(size) {
      console.log(size);
      const _this = this;
      _this.pageing.pageSize = size;
      _this.getlabelListFn();
    },
    // 页面更新
    CurrentPageChangeFn(num) {
      const _this = this;

      _this.pageing.pageNum = num;
      _this.getlabelListFn();
    },

    // 获取标签列表
    async getlabelListFn() {
      const _this = this;
      _this.config.loading = true;
      let { code, rows, total } = await getlabelListApi(_this.pageing);
      if (code != 200) return;
      _this.pageing.total = total;
      // 去重复
      function removeDuplicates(params) {
        if (params == 1) {
          return {
            label: "普通标签",
            value: 1,
          };
        } else {
          return {
            label: "热度标签",
            value: 2,
          };
        }
      }
      _this.labelData = JSON.parse(JSON.stringify(rows));
      _this.noLablData = JSON.parse(JSON.stringify(rows));
      let arr = [],
        temArr = [];
      _this.labelData.forEach((item, index) => {
        if (!arr.includes(item.type)) {
          arr.push(item.type);

          temArr.push(removeDuplicates(item.type));
        }

        if (item.type == 1) {
          item.type = "普通标签";
        } else if (item.type == 2) {
          item.type = "热度标签";
        }
      });
      // 只进行一次筛选
      if (this.isFilter) {
        _this.comForm.modes.forEach((item) => {
          if (item.mode == "type") item.select = temArr;
        });
        this.isFilter = false;
      }

      _this.config.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>